<template>
<div class="dialogue" >
    <div class="datetime">
        <span>{{msg.datetime | formatTime }}</span>
    </div>
    <div class="head-box">
        <img v-bind:src="`http://q1.qlogo.cn/g?b=qq&nk=${msg.imgurl}&s=100`" alt="红包">
        <span>{{msg.username}}</span>
    </div>
    <router-link  tag="div" v-bind:to="{path:'/hongbao',query:{id:msg.uid}}" class="img-box" v-bind:class="msg.backpostion | addClass" ></router-link>
</div>
</template>

<script>
import {format} from '@/utils'

export default {
  name: 'dialogue',
  props: ["msg"],
  filters:{
      formatTime(value){
         return format(value)
      },
      addClass(value){
          return 'img-box-postion-'+ value
      }
  },
  
  data(){
      return{
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.dialogue{
    width: 90%;
    margin: 30px 5%;
    height: 270px;
}
.datetime{
    text-align: center;
    padding: 10px 0;
    font-size: 15px;

}
.dialogue .datetime span{
    display: inline-block;
    padding: 10px 0;
    font-size: 13px;
    color: #8f8c8c;
}
.dialogue img{
    border-radius: 50%;
    display: inline-block;

    width: 45px;
}
.dialogue span{
    padding: 0 15px;
    color: #665d5d;
    font-size: 14px;
    display: inline-block;
    transform: translateY(-20px);
}
.img-box{
    margin: -15px 0 0 60px;
    width: 150px;
    height: 171px;
    border-radius: 10px;
    background-image: url(../assets/hongbao.png);
    background-size: 100%;
}

.img-box-postion-1{
    background-position: 0px 0px; // 默认

}
.img-box-postion-2{
    background-position: 0px 171px; // 企鹅 乖

}
.img-box-postion-3{
    background-position: 0px 520px; // 王者 妲己

}
.img-box-postion-4{
    background-position: 0px 697px; //王者孙悟空

}
.img-box-postion-5{
    background-position: 0px 878px;  // 企鹅 给爷乐一个

}
.img-box-postion-6{
    background-position: 0px 1048px; // 高

}
.img-box-postion-7{
    background-position: 0px 1228px; // 妹子先抢

}
.img-box-postion-8{
    background-position: 0px 345px; // 毛熊 乖

}
.img-box-postion-9{
    background-position: 0px -176px; // 小屁孩 赞

}


</style>
